<template>
	<div>
		<el-dialog :title="$t('action.update')" width="70%" class="icon-dialog" :visible.sync="show" @open="open" :before-close="closeForm" append-to-body>
			<el-form :size="size" ref="form" :model="form" :rules="rules" :label-width="$store.getters.device !== 'mobile'?'16%':'90px'">
<!-- 				 <el-row >-->
					<el-col :span="6">
						<el-form-item :label="$t('field.WorkSetting_fnumber')" prop="fnumber">
							<el-input v-model="form.fnumber" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fnumber')})">
							</el-input>
						</el-form-item>
					</el-col>
<!--				 </el-row>-->
<!--	 				 <el-row >-->
					<el-col :span="8">
						<el-form-item :label="$t('field.WorkSetting_fbillno')" prop="fbillno">
							<el-input v-model="form.fbillno" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fbillno')})">
							</el-input>
						</el-form-item>
					</el-col>
<!--				 </el-row>-->
<!--	 				 <el-row >-->
					<el-col :span="7">
						<el-form-item :label="$t('field.WorkSetting_fname')" prop="fname">
							<el-input v-model="form.fname" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fname')})">
							</el-input>
						</el-form-item>
					</el-col>
<!--				 </el-row>-->
<!--	 				 <el-row >-->
					<el-col :span="7">
						<el-form-item :label="$t('field.WorkSetting_fcustomer')" prop="fcustomer">
							<el-input v-model="form.fcustomer" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fcustomer')})">
							</el-input>
						</el-form-item>
					</el-col>
<!--				 </el-row>-->
<!--	 				 <el-row >-->
					<el-col :span="8">
						<el-form-item :label="$t('field.WorkSetting_fheader')" prop="fheader">
							<el-input v-model="form.fheader" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fheader')})">
							</el-input>
						</el-form-item>
					</el-col>
<!--				 </el-row>-->
<!--	 				 <el-row >-->
					<el-col :span="10">
						<el-form-item :label="$t('field.WorkSetting_ftype')" prop="ftype">
							<el-input v-model="form.ftype" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_ftype')})">
							</el-input>
						</el-form-item>
					</el-col>
<!--				 </el-row>-->
	 				 <el-row >
					<el-col :span="8">
						<el-form-item :label="$t('field.WorkSetting_fnote')" prop="fnote">
							<el-input style="width: 500px" type="textarea" v-model="form.fnote" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fnote')})">
							</el-input>
						</el-form-item>
					</el-col>
				 </el-row>

        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.WorkSetting_ftupian')" prop="ftupian">
              <ImagesUpload size="small"  fileType="images" :images.sync="form.ftupian"></ImagesUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.WorkSetting_flabxz')" prop="flabxz">
              <el-select v-model="form.flabxz" placeholder="请选择lab" @change="onMidChange">
                <el-option  label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
              </el-select>
              <!--							<el-input v-model="form.flabxz" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_flabxz')})">-->
              <!--							</el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item label="lab内容" prop="labtx" v-if="!ceshi">
              <el-input v-model="labtx" v-if="!ceshi1" autoComplete="off" clearable  placeholder="lab填写"></el-input>
              <el-input v-model="labtx" v-if="!ceshi2" autoComplete="off" clearable  placeholder="lab填写"></el-input>
              <el-input v-model="labtx" v-if="!ceshi3" autoComplete="off" clearable  placeholder="lab填写"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item :label="$t('field.WorkSetting_fbxtype')" prop="fbxtype">
              <el-select v-model="form.fbxtype" placeholder="波形类型选择">
                <el-option label="vs波形" value="1"></el-option>
                <el-option label="测试波形" value="2"></el-option>
                <el-option label="vs和测试波形" value="3"></el-option>
              </el-select>
              <!--							<el-input v-model="form.fbxtype" autoComplete="off" clearable  :placeholder="$t('system.pleaseInput',{title:$t('field.WorkSetting_fbxtype')})">-->
              <!--							</el-input>-->
            </el-form-item>
          </el-col>
        </el-row>
				</el-form>
      <el-dialog title="vs波形选择"  :visible.sync="vsShow" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">

        <el-table :data="vsShowList"  class="detail" height="60vh" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="#" width="40" align="center" type="index"></el-table-column>
          <el-table-column prop="vsName" label="波形名称"></el-table-column>
          <el-table-column prop="vsNumber" label="波形编号"></el-table-column>
          <el-table-column prop="wendu" label="温度"></el-table-column>
          <el-table-column prop="fdianya" label="电压"></el-table-column>
          <el-table-column prop="fngtype" label="甩线类型"></el-table-column>
          <el-table-column prop="fresidtime" label="存放时间" ></el-table-column>
          <el-table-column prop="frefreshtime" label="嵌入式刷新时间" ></el-table-column>
          <el-table-column prop="ftuopanqty" label="测试托盘数量" ></el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="success" @click="dataToInfo()">添加</el-button>
          <el-button @click="vsShow = false" type="info">关闭</el-button>
        </div>
      </el-dialog>
      <template>
        <div>VS波形设置</div>
        <el-button type="success"  size="mini" icon="el-icon-plus"  @click="addwave()" >增加</el-button>
      </template>
      <el-table :data ="vslist" style="width: 100%">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column prop="vsNumber" align="center" label="编号" width="120"></el-table-column>
        <el-table-column prop="vsName" align="center" label="名称" width="120"></el-table-column>
        <el-table-column prop="fvcom" align="center" label="VCom值" width="120"></el-table-column>
        <el-table-column prop="wendu" align="center" label="温度" width="120"></el-table-column>
        <el-table-column prop="fdianya" align="center" label="电压范围" width="120"></el-table-column>
        <el-table-column prop="fboxing" align="center" label="波形" width="120"></el-table-column>
        <el-table-column prop="fresidtime" align="center" label="存放时间" width="120"></el-table-column>
        <el-table-column prop="frefreshtime" align="center" label="刷新时间" width="120"></el-table-column>
        <el-table-column prop="ftuopanqty" align="center"label="托盘数量" width="120"></el-table-column>
        <el-table-column prop="fbillno" align="center"label="操作" width="120">
          <template slot-scope="scope">
<!--            <div v-if="scope.row.id">-->
<!--              <el-button size="mini" type="primary"><i class="el-icon-edit" />{{$t('action.update')}}</el-button>-->
<!--              <el-button size="mini" type="danger"><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>-->
              <el-button size="mini" type="danger" @click="handlevsdelete(scope.$index)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>

<!--            </div>-->
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="测试波形选择"  :visible.sync="testShow" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">

        <el-table :data="testShowList"  class="detail" height="60vh" @selection-change="testHandleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="#" width="40" align="center" type="index"></el-table-column>
          <el-table-column prop="vsName" label="波形名称"></el-table-column>
          <el-table-column prop="vsNumber" label="波形编号"></el-table-column>
          <el-table-column prop="wendu" label="温度"></el-table-column>
          <el-table-column prop="fdianya" label="电压"></el-table-column>
          <el-table-column prop="fngtype" label="甩线类型"></el-table-column>
          <el-table-column prop="fresidtime" label="存放时间" ></el-table-column>
          <el-table-column prop="frefreshtime" label="嵌入式刷新时间" ></el-table-column>
          <el-table-column prop="ftuopanqty" label="测试托盘数量" ></el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="success" @click="dataToTestInfo()">添加</el-button>
          <el-button @click="testShow = false" type="info">关闭</el-button>
        </div>
      </el-dialog>
      <template>
        <div>测试波形设置</div>
        <el-button type="success"  size="mini" icon="el-icon-plus" @click="addCeshi()">增加</el-button>
      </template>
      <el-table :data ="testlist" style="width: 100%">
        <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
        <el-table-column prop="vsNumber" align="center" label="编号" width="120"></el-table-column>
        <el-table-column prop="vsName" align="center" label="名称" width="120"></el-table-column>
        <el-table-column prop="vsid" align="center" label="VCom值" width="120"></el-table-column>
        <el-table-column prop="wendu" align="center" label="温度" width="120"></el-table-column>
        <el-table-column prop="fdianya" align="center" label="电压范围" width="120"></el-table-column>
        <el-table-column prop="boxing" align="center" label="波形" width="120"></el-table-column>
        <el-table-column prop="frefreshtime" align="center" label="刷新时间" width="120"></el-table-column>
        <el-table-column prop="fresidtime" align="center" label="存放时间" width="120"></el-table-column>
        <el-table-column prop="ftuopanqty" align="center"label="托盘数量" width="120"></el-table-column>
        <el-table-column prop="fbillno" align="center"label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handlevsDelete(scope.$index)" ><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">{{$t('system.confirm')}}</span>
					<span v-else>{{$t('system.submitting')}}</span>
				</el-button>
				<el-button :size="size" @click="closeForm">{{$t('system.cancel')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {detail , update} from '@/api/app/worksetting'
import ImagesUpload from '@/components/common/ImagesUpload.vue'
import {getList} from "@/api/app/vswave";
import {getTestWaveList} from "@/api/app/testwave";
import Add from "@/views/app/worksetting/add.vue";
import index from "vuex";

export default {
	name:'workSettingupdate',
  computed: {
    index() {
      return index
    }
  },
	components: {
	   		ImagesUpload,Add
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: 'small'
		},
		info: {
			type: Object,
		},
	},
	data(){
		return {
		    dialog:{
          addDialogStatus : false,
			},

      //输入框隐藏
      ceshi: true,
      ceshi1: true,
      ceshi2: true,
      ceshi3: true,
			form: {
			   fnumber:'',
			   fbillno:'',
			   fname:'',
			   fcustomer:'',
			   fheader:'',
			   ftype:'',
			   fnote:'',
			   flabxz:'',
			   ftupian:[],
			   fbxtype:'',
			},
		    initial:{},
			loading:false,

      addInfo:{},
			rules: {
			},
      vslist:[],
      testlist:[],
      vsShow:false,
      testShow:false,
      testShowList:[],
      vsShowList:[],
      multipleSelection:[],
      testMultipleSelection:[]
		}
	},
	watch:{
		show(val){
			if(val){
			}
		}
	},
	methods: {
    //lab选择
    onMidChange(e) {
      this.ceshi = false
      if (e == '1') {
        this.ceshi1 = false
        this.ceshi2 = true
        this.ceshi3 = true
      } else if (e == '2') {
        this.ceshi1 = false
        this.ceshi2 = false
        this.ceshi3 = true
      } else if (e == '3') {
        this.ceshi1 = false
        this.ceshi2 = false
        this.ceshi3 = false
      }
    },
    dataToTestInfo(){
      if (this.testMultipleSelection.length === 0) {
        ElMessage.error('请选择波形！')
        return
      }
      this.testShow = false
      this.testMultipleSelection.forEach(value => {
        this.testlist.push({
          vsNumber:value.vsNumber,
          vsName:value.vsName,
          vsid:value.vsid,
          boxing:value.boxing,
          fdianya:value.dianya,
          fngtype:value.fngtype,
          fresidtime:value.fresidtime,
          frefreshtime:value.frefreshtime,
          ftuopanqty:value.ftuopanqty,
          fpictureId:value.fpictureId,
          femperature:value.wendu
        })
      })
    },
    testHandleSelectionChange(val){
      this.testMultipleSelection = val
    },
    //打开测试波形列表
    addCeshi(){
      getTestWaveList().then(res =>{
        if(res.status == 200){
          this.testShow = true
          this.testShowList = res.data
        }
      })
    },
    dataToInfo(){
      if (this.multipleSelection.length === 0) {
        ElMessage.error('请选择波形！')
        return
      }
      this.vsShow = false
      console.log(this.multipleSelection)
      this.multipleSelection.forEach(value => {
        this.vslist.push({
          vsNumber:value.vsNumber,
          vsName:value.vsName,
          vsid:value.vsid,
          boxing:value.fboxing,
          fdianya:value.fdianya,
          fngtype:value.fngtype,
          fresidtime:value.fresidtime,
          frefreshtime:value.frefreshtime,
          ftuopanqty:value.ftuopanqty,
          fpictureId:value.fpictureId,
          femperature:value.wendu
        })
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
		open(){
			this.form = this.info
      this.setDefaultVal('ftupian')
      detail(this.info).then(res => {
        this.testlist = res.data.testList
        this.vslist = res.data.vsList
      })
		},
    //vs波形添加
    addwave(){
      getList().then(res =>{
        if(res.status == 200){
          this.vsShow = true
          this.vsShowList = res.data
        }
      })
    },
    //删除vs行
    handlevsDelete(index) {
      this.vslist.splice(index,1);
    },
    //删除test行
    handleDelete(index) {
      this.testlist.splice(index,1);
    },
		submit(){
			this.$refs['form'].validate(valid => {
				if(valid) {
					this.loading = true
					update({header:this.form,datavslist:this.vslist,datatestlist:this.testlist}).then(res => {
						if(res.status == 200){
							this.$message({message: this.$t('system.success'), type: 'success'})
							this.$emit('refresh_list')
							this.closeForm()
						}
					}).catch(()=>{
						this.loading = false
					})
				}
			})
		},
		setDefaultVal(key){
			if(this.form[key] == null || this.form[key] == ''){
				this.form[key] = []
			}
		},
		closeForm(){
			this.$emit('update:show', false)
			this.loading = false
			if (this.$refs['form']!==undefined) {
				this.$refs['form'].resetFields()
			}
		},
	}
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/common.scss'
</style>
